<template>
  <div>
    <CommonCard class="commom-card" title="累计订单量" value="2,157,420">
      <template>
        <div id="total-orders-chart" :style="{width:'100%',height:'100%'}" ></div>
      </template>
      <template v-slot:footer>
        <span>昨日订单量</span>
        <span class="emphasis">2,000,000</span>
      </template>
    </CommonCard>
  </div>
</template>

<script>
import commomCardMixin from "../../mixins/commomCardMixin";
export default {
  mixins: [commomCardMixin],
  mounted(){
    const chartDom = document.getElementById('total-orders-chart')
    //init(DOM元素，样式，渲染模式（svg）)
    const chart = this.$echarts.init(chartDom,{rederer:'svg'})
    chart.setOption({
      xAxis:{
        type:'category',
        //是否隐藏线
        show:false,
        //留白策略
        boundaryGap:false
      },
      yAxis:{
        //是否隐藏线
        show:false,
      },
      series:[{
        type:'line',
        data:[620,432,220,534,790,430,220,320,532,320,834,690,530,220,620],
        areaStyle:{
          color:'purple'
        },
        //横坐标轴风格
        lineStyle:{
          width:0
        },
        //data值的风格
        itemStyle:{
          opacity:0
        },
        //是否平滑显示
        smooth:true
      }],
      grid:{
        // 绘图网格距离
        top:0,
        bottom:0,
        left:0,
        right:0,
      }
    })
  },
};
</script>
<style scoped lang="scss">
</style>